﻿/*动画规则1*/
@keyframes myfirst {
    0% {
        transform: rotateZ(0deg);
    }

    25% {
        transform: rotateZ(90deg);
    }

    50% {
        transform: rotateZ(180deg);
    }

    75% {
        transform: rotateZ(270deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

@-moz-keyframes myfirst /* Firefox */
{
    0% {
        -moz-transform: rotateZ(0deg);
    }

    25% {
        -moz-transform: rotateZ(90deg);
    }

    50% {
        -moz-transform: rotateZ(180deg);
    }

    75% {
        -moz-transform: rotateZ(270deg);
    }

    100% {
        -moz-transform: rotateZ(360deg);
    }
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    0% {
        -webkit-transform: rotateZ(0deg);
    }

    25% {
        -webkit-transform: rotateZ(90deg);
    }

    50% {
        -webkit-transform: rotateZ(180deg);
    }

    75% {
        -webkit-transform: rotateZ(270deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
    }
}

@-o-keyframes myfirst /* Opera */ {
    0%;

{
    -o-transform: rotateZ(0deg);
}

25% {
    -o-transform: rotateZ(90deg);
}

50% {
    -o-transform: rotateZ(180deg);
}

75% {
    -o-transform: rotateZ(270deg);
}

100% {
    -o-transform: rotateZ(360deg);
}

}

@-ms-keyframes myfirst {
    0% {
        -ms-transform: rotateZ(0deg);
    }

    25% {
        -ms-transform: rotateY(90deg);
    }

    50% {
        -ms-transform: rotateZ(180deg);
    }

    75% {
        -ms-transform: rotateZ(270deg);
    }

    100% {
        -ms-transform: rotateZ(360deg);
    }
}

/*动画规则2*/
@keyframes myfirst2 {
    0% {
        transform: rotateZ(0deg);
    }

    25% {
        transform: rotateZ(90deg);
    }

    50% {
        transform: rotateZ(180deg);
    }

    75% {
        transform: rotateZ(270deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

@-moz-keyframes myfirst2 /* Firefox */
{
    0% {
        -moz-transform: rotateZ(0deg);
    }

    25% {
        -moz-transform: rotateZ(90deg);
    }

    50% {
        -moz-transform: rotateZ(180deg);
    }

    75% {
        -moz-transform: rotateZ(270deg);
    }

    100% {
        -moz-transform: rotateZ(360deg);
    }
}

@-webkit-keyframes myfirst2 /* Safari 和 Chrome */
{
    0% {
        -webkit-transform: rotateZ(0deg);
    }

    25% {
        -webkit-transform: rotateZ(90deg);
    }

    50% {
        -webkit-transform: rotateZ(180deg);
    }

    75% {
        -webkit-transform: rotateZ(270deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
    }
}

@-o-keyframes myfirst2 /* Opera */ {
    0%;

{
    -o-transform: rotateZ(0deg);
}

25% {
    -o-transform: rotateZ(90deg);
}

50% {
    -o-transform: rotateZ(180deg);
}

75% {
    -o-transform: rotateZ(270deg);
}

100% {
    -o-transform: rotateZ(360deg);
}

}

@-ms-keyframes myfirst2 {
    0% {
        -ms-transform: rotateZ(0deg);
    }

    25% {
        -ms-transform: rotateY(90deg);
    }

    50% {
        -ms-transform: rotateZ(180deg);
    }

    75% {
        -ms-transform: rotateZ(270deg);
    }

    100% {
        -ms-transform: rotateZ(360deg);
    }
}

/*弹动特效*/
@keyframes rubberBand {
    0% {
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
        -moz-transform: scale3d(1.25, 0.75, 1);
        -ms-transform: scale3d(1.25, 0.75, 1);
        -o-transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
        -moz-transform: scale3d(0.75, 1.25, 1);
        -ms-transform: scale3d(0.75, 1.25, 1);
        -o-transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
        -moz-transform: scale3d(1.15, 0.85, 1);
        -ms-transform: scale3d(1.15, 0.85, 1);
        -o-transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
        -moz-transform: scale3d(.95, 1.05, 1);
        -ms-transform: scale3d(.95, 1.05, 1);
        -o-transform: scale3d(.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
        -moz-transform: scale3d(1.05, .95, 1);
        -ms-transform: scale3d(1.05, .95, 1);
        -o-transform: scale3d(1.05, .95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes rubberBand {
    0% {
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
        -moz-transform: scale3d(1.25, 0.75, 1);
        -ms-transform: scale3d(1.25, 0.75, 1);
        -o-transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
        -moz-transform: scale3d(0.75, 1.25, 1);
        -ms-transform: scale3d(0.75, 1.25, 1);
        -o-transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
        -moz-transform: scale3d(1.15, 0.85, 1);
        -ms-transform: scale3d(1.15, 0.85, 1);
        -o-transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
        -moz-transform: scale3d(.95, 1.05, 1);
        -ms-transform: scale3d(.95, 1.05, 1);
        -o-transform: scale3d(.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
        -moz-transform: scale3d(1.05, .95, 1);
        -ms-transform: scale3d(1.05, .95, 1);
        -o-transform: scale3d(1.05, .95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
    }
}




/*放大特效*/
@keyframes zoom1 {
    0% {
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
    }


    100% {
        -webkit-transform: scale3d(1.1, 1.1,1.1);
        transform: scale3d(1.1, 1.1,1.1);
        -moz-transform: scale3d(1.1, 1.1,1.1);
        -ms-transform: scale3d(1.1, 1.1,1.1);
        -o-transform: scale3d(1.1, 1.1,1.1);
    }
}

@-webkit-keyframes zoom1 {
    0% {
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
    }


    100% {
        -webkit-transform: scale3d(1.1, 1.1,1.1);
        transform: scale3d(1.1, 1.1,1.1);
        -moz-transform: scale3d(1.1, 1.1,1.1);
        -ms-transform: scale3d(1.1, 1.1,1.1);
        -o-transform: scale3d(1.1, 1.1,1.1);
    }
}

/*动作1 弹动*/
.action1 {
    cursor: pointer;
    border-radius: 1240px;
    width: 60%;
}

    .action1:hover {
        animation: rubberBand 0.6s linear;
        -moz-animation: rubberBand 0.6s linear; /* Firefox */
        -webkit-animation: rubberBand 0.6s linear; /* Safari 和 Chrome */
        -o-animation: rubberBand 0.6s linear;
        -ms-animation: rubberBand 0.6s linear;
    }

/*动作2 放大*/
.action2 {
    cursor: pointer;
}

    .action2:hover {
        animation: zoom1 0.6s linear;
        -moz-animation: zoom1 0.6s linear; /* Firefox */
        -webkit-animation: zoom1 0.6s linear; /* Safari 和 Chrome */
        -o-animation: zoom1 0.6s linear;
        -ms-animation: zoom1 0.6s linear;
        -webkit-transform: scale3d(1.1, 1.1,1.1);
        transform: scale3d(1.1, 1.1,1.1);
        -moz-transform: scale3d(1.1, 1.1,1.1);
        -ms-transform: scale3d(1.1, 1.1,1.1);
        -o-transform: scale3d(1.1, 1.1,1.1);
    }
